import { nestedCityCode } from '@/components/CityCode/citycode';
import InputLnglat from '@/components/InputLnglat';
import RemoteSelect from '@/components/RemoteSelect';
import { getSchemeList } from '@/pages/Finance/Scheme/RuleList/service';
import {
  // ProFormDateRangePicker,
  ProFormRadio,
  ProFormText,
  StepsForm,
} from '@ant-design/pro-components';
import { Cascader, Form, Input, message, Modal } from 'antd';
import { TimePicker } from 'antd/es';
import { useState } from 'react';
import { judgeHas_exists } from '../service';
import styles from '../style.less';
import type { createParkItem } from '../types';

interface ParkList {
  visible: boolean;
  unVisible: () => void;
  onSubmit: (values: createParkItem) => Promise<boolean | undefined>;
}

export default (props: ParkList) => {
  const { visible, unVisible, onSubmit: createParkingLot } = props;
  const [parkName, setParkName] = useState<string>('');
  return (
    <div>
      <Modal
        onCancel={unVisible}
        centered
        visible={visible}
        title="添加停车场"
        width={800}
        footer={null}
      >
        <StepsForm
          onFinish={(values: createParkItem) => createParkingLot(values)}
          formProps={{
            validateMessages: {
              required: '此项为必填项',
            },
          }}
        >
          <StepsForm.StepForm
            title="车场信息"
            style={{ height: 270, width: 600 }}
            className={styles.stepsaction}
            onFinish={async () => {
              const res = await judgeHas_exists(parkName, '1');
              if (res.data) {
                message.error(res.message);
                return false;
              } else {
                return true;
              }
            }}
          >
            <ProFormRadio.Group
              radioType="radio"
              name="type"
              label="车场类型"
              // fieldRef={Parktype}
              options={[
                {
                  label: '扫码停车',
                  value: 1,
                },
                {
                  label: '预约停车',
                  value: 2,
                },
                {
                  label: '普通停车不可预约',
                  value: 3,
                },
                {
                  label: '普通停车可预约',
                  value: 4,
                },
              ]}
              rules={[{ required: true, message: '请选择车场类型' }]}
            />
            <Form.Item
              name="name"
              label="停车场名称"
              rules={[{ required: true, message: '请输入车场名称' }]}
            >
              <Input
                placeholder="请输入"
                value={parkName}
                style={{ width: 328 }}
                onChange={(e) => {
                  setParkName(e.target.value);
                }}
              />
            </Form.Item>
            <Form.Item
              name="open_time"
              label="运营时间"
              rules={[{ required: true, message: '请输取运营时间' }]}
            >
              <TimePicker.RangePicker
                allowClear
                format={'HH:mm'}
                minuteStep={10}
                style={{ width: 328 }}
              />
            </Form.Item>
          </StepsForm.StepForm>
          <StepsForm.StepForm title="车场位置" className={styles.secondStep}>
            <Form.Item
              name="district"
              label="行政区"
              rules={[{ required: true, message: '请选择行政区' }]}
              style={{ width: 500 }}
            >
              <Cascader
                placeholder="选择所在地区"
                fieldNames={{ label: 'name', value: 'code', children: 'children' }}
                options={nestedCityCode}
              />
            </Form.Item>
            <ProFormText
              width={500}
              name="address"
              label="停车场详细位置"
              placeholder="请输入"
              rules={[{ required: true, message: '请输入停车场详细位置' }]}
            />
            <Form.Item
              name="location"
              label="停车场经纬度"
              style={{ width: 500 }}
              rules={[{ required: true, message: '请在地图中选择停车场位置' }]}
            >
              <InputLnglat value={{ lat: 30, lng: 120 }} />
            </Form.Item>
          </StepsForm.StepForm>
          <StepsForm.StepForm title="计费规则">
            <ProFormRadio.Group
              radioType="radio"
              name="chargeRangeType"
              label="是否含有道闸"
              options={[
                {
                  label: '有道闸',
                  value: 1,
                },
                {
                  label: '无道闸',
                  value: 2,
                },
              ]}
              rules={[{ required: true, message: '请选择是否有道闸' }]}
            />
            <Form.Item name="scheme" label="计费规则" rules={[{ required: true, message: '必选' }]}>
              <RemoteSelect
                style={{ width: '100%' }}
                fieldNames={{ key: 'id', value: 'id', label: 'name' }}
                request={async (name) => {
                  return await getSchemeList({ name });
                }}
              />
            </Form.Item>
          </StepsForm.StepForm>
        </StepsForm>
      </Modal>
    </div>
  );
};
